const staff_index = {
    template:`
<div>
    <div class="events row pt-2">
                            <div class="unhandled-event col-6 border-bottom">
                                <h4 class="py-2">Unhandled Event</h4>
                                <table class="table table-striped border">
                                    <thead>
                                    <tr>
                                        <th>Code</th>
                                        <th>Name</th>
                                        <th>Date</th>
                                        <th>Type</th>
                                        <th>Status</th>
                                        <th>Permission</th>
                                        <th>Operation</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in unhandled_events.data[unhandled_events.current_page]" :key="index">
                                        <td class="text-uppercase">{{item.code}}</td>
                                        <td>{{item.name}}</td>
                                        <td>{{item.date}}</td>
                                        <td>{{item.type}}</td>
                                        <td>{{item.status}}</td>
                                        <td>{{item.permission}}</td>
                                        <td>
                                            <button class="btn btn-sm btn-primary" @click="accept_event(item)">Accept</button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <ul class="pagination d-flex justify-content-center">
                                    <li class="page-item"><a class="page-link">&laquo;</a></li>
                                    <li class="page-item"><a class="page-link" v-for="(item,index) in unhandled_events.data" :key="index">{{index+1}}</a></li>
                                    <li class="page-item"><a class="page-link">&raquo;</a></li>
                                </ul>
                            </div>
                            <div class="handled-event col-6 border-bottom">
                                <h4 class="py-2">Unhandled Event</h4>
                                <table class="table table-striped border">
                                    <thead>
                                    <tr>
                                        <th>Code</th>
                                        <th>Name</th>
                                        <th>Date</th>
                                        <th>Type</th>
                                        <th>Status</th>
                                        <th>Permission</th>
                                        <th>Operation</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in handled_events.data[handled_events.current_page]" :key="index">
                                        <td class="text-uppercase">{{item.code}}</td>
                                        <td>{{item.name}}</td>
                                        <td>{{item.date}}</td>
                                        <td>{{item.type}}</td>
                                        <td>{{item.status}}</td>
                                        <td>{{item.permission}}</td>
                                        <td>
                                            <button class="btn btn-sm btn-primary" @click="finish_event(item)">Finish</button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <ul class="pagination d-flex justify-content-center">
                                    <li class="page-item"><a class="page-link">&laquo;</a></li>
                                    <li class="page-item"><a class="page-link" v-for="(item,index) in handled_events.data" :key="index">{{index+1}}</a></li>
                                    <li class="page-item"><a class="page-link">&raquo;</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="unreplied-message mt-4">
                            <h4>Unreplied Messages</h4>
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>Client</th>
                                    <th>Event</th>
                                    <th>Content</th>
                                    <th>Reply</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in unreplied_events" :key="index">
                                    <td>{{item.corporate_name}}</td>
                                    <td>{{item.name}}</td>
                                    <td>{{item.last_message.content}}</td>
                                    <td>
                                        <router-link :to="{name:'staff.event.message',params:{event_id:item.id}}" href="./event/message.html" class="btn btn-primary btn-sm text-white">Reply<span class="badge badge-danger">{{item.message_count}}</span></router-link>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
    `,
    data() {
        return {
            events:null,
            unhandled_events:{
                data:[],
                current_page:0,
                total:0
            },
            handled_events:{
                data:[],
                current_page:0,
                total:0
            },
            unreplied_events:[]
        };
    },
    methods:{
        get_events(){
            this.handled_events.data = [];
            this.unhandled_events.data = [];
            ajax.get('event/my').then(res => {
                if (res.status === 200){
                    this.events = res.data.data;

                    let unhandleds = [];
                    let handleds = [];

                    this.events.forEach((item,index)=>{
                        switch (item.response) {
                            case 'Pending':
                                unhandleds.push(item);
                                break;
                            case 'accept':
                                handleds.push(item);
                                break;
                        }
                    })

                    this.handled_events.total = handleds.length;
                    this.unhandled_events.total = unhandleds.length;

                    let unhandled_page = Math.ceil(unhandleds.length / 5);
                    let handled_page = Math.ceil(handleds.length / 5);

                    for (let i = 0; i < unhandled_page;i++){
                        let event = unhandleds.splice(0,5);
                        this.unhandled_events.data.push(event);
                    }
                    
                    for (let i = 0; i < handled_page;i++){
                        let event = handleds.splice(0,5);
                        this.handled_events.data.push(event);
                    }

                }
            })
        },
        get_unreplied_events() {
            ajax.get('event/unreplied').then(res => {
                if (res.status === 200){
                    this.unreplied_events = res.data.data;
                }
            })
        },
        finish_event(event){
            ajax.post(`employee/finish/${event.id}`).then(res=>{
                if (res.status === 200){
                    Bus.$emit('m','Finish this event success','success');
                    this.get_events();
                }
            })
        },
        accept_event(event){
            ajax.post(`employee/accept/${event.id}`).then(res => {
                if (res.status === 200){
                    Bus.$emit('m','Accept this event success','success');
                    this.get_events();
                }
            })
        },
        switch_page(events,index){
            events.current_page = index;
        },
        next_page(events){
            if (events.current_page < events.data.length -1) ++events.current_page;
        },
        preious_page(events){
            if (events.current_page > 0) --events.current_page;
        }
    },
    mounted() {
        this.get_events();
        this.get_unreplied_events();
    }

};